import React from 'react';
import styles from './Users.css';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button, Menu, Dropdown, Icon, Modal, message } from 'antd';
import { PAGE_SIZE } from '../../constants';
import { routerRedux } from 'dva/router';
import AdvancedSearchForm from './Form';
import UserModal from './UserModal';

function Users({ dispatch, list: dataSource, selectedRowKeys, loading, total, page: current }) {

    const columns = [
      {
        title: '会员ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '手机',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '车牌号',
        dataIndex: 'license',
        key: 'license',
      },
      {
        title: '停车地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '注册时间',
        dataIndex: 'reg_time',
        key: 'reg_time',
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, { id }) => (
          <span className={styles.operation}>
            <a onClick={editHandler.bind(null, id)}>修改</a>
            <Popconfirm title="确定要删除吗?" onConfirm={deleteHandler.bind(null, id)}>
              <a>删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];

    // 增删改
    function addHandler() {
        dispatch({ 'type': 'users/add' });
    }

    function editHandler(id) {
        dispatch({ type: 'users/edit', payload: { id } });
    }

    function deleteHandler(id) {
        dispatch({ type: 'users/remove', payload: { id } });
    }

    function pageChangeHandler(page) {
        dispatch(routerRedux.push({
            pathname: '/users',
            query: { page }
        }));
    }

    function menuSelectedHandler({ item, key }) {
        if (!selectedRowKeys || selectedRowKeys.length==0) {
            message.info('请先选择要删除的数据');
            return;
        }
        Modal.confirm({
            title: '确定要删除吗？',
            onOk: function(){
                dispatch({ type: 'users/batchRemove' });
            }
        });
    }

    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
          dispatch({ type: 'users/multiSelect', selectedRowKeys });
      }
    };

    const menu = (
      <Menu onClick={menuSelectedHandler}>
        <Menu.Item key="delete">删除</Menu.Item>
      </Menu>
    );

    return (
      <div className={styles.normal}>

        <div className={styles['form-wrap']}>
          <AdvancedSearchForm />
        </div>

        <div>共搜索到 {total} 条数据</div>

        <div className={styles['button-wrap']}>
          <Button type="primary" onClick={addHandler}>添加会员</Button>
          
          <Dropdown overlay={menu}>
            <Button>批量操作</Button>
          </Dropdown>
        </div>

        <div className={styles.clear}>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            rowKey={record => record.id}
            pagination={false}
          />
          <Pagination
            className="ant-table-pagination"
            total={total}
            current={current}
            pageSize={PAGE_SIZE}
            onChange={pageChangeHandler}
          />
        </div>

        <UserModal visible={false} />
      </div>
    );
}

function mapStateToProps(state) {
  const { selectedRowKeys, list, total, page } = state.users;
  return {
    selectedRowKeys,
    list,
    total,
    page,
    loading: state.loading.models.users,
  };
}

export default connect(mapStateToProps)(Users);
